<template>
  <div class="admin">
    <div class="admin-left"></div>
    <div class="admin-right">
      <h3>商品列表</h3>
      <el-popconfirm size="mini" title="确定退出登陆吗？" type="primary" style="position: fixed; right: 40px; top: 20px" @confirm="backoff">
        <el-button slot="reference">退出</el-button>
      </el-popconfirm>
      <!--添加商品列表-->
      <el-button style="position: relative; left: 40px" @click="showList = !showList" icon="el-icon-edit" type="primary" >添加商品</el-button>
      <!---->
      <el-form v-model="newList"  ref="numberValidateForm" label-width="100px"  class="demo-ruleForm" v-if="showList"
        style="
          width: 600px;
          height: 400px;
          background: #fff;
          position: fixed;
          z-index: 9;
          top: 100px;
          left: 30%;
          box-shadow: 0 0 6px #333;
          padding-top: 20px;
        ">
        <el-form-item label="添加商品"></el-form-item>
        <el-form-item label="兑换商品所需积分" prop="price">
          <el-input style="width: 440px" v-model="newList.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input style="width: 440px" v-model="newList.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image">
          <el-input style="width: 440px" v-model="newList.image" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getlist">提交</el-button>
          <el-button @click="showList = !showList">取消</el-button>
        </el-form-item>
      </el-form>

      <!--商品列表-->
      <el-table class="table" :data="list" style="width: 100%">
        <el-table-column label="商品ID" width="240">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row._id }}</span>
          </template>
        </el-table-column>
        <el-table-column label="商品名称" width="360">
          <template slot-scope="scope">
            <p>{{ scope.row.name }}</p>
          </template>
        </el-table-column>
        <el-table-column label="图片" width="200">
          <template slot-scope="scope">
            <img :src="scope.row.image" />
          </template>
        </el-table-column>
        <el-table-column label="商品价格" width="200">
          <template slot-scope="scope">
            <p>{{ scope.row.price }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button @click="set=!set,upList(scope.$index)">编辑</el-button>
            <el-popconfirm size="mini" title="这是一段内容确定删除吗？" @confirm="handleDelete(scope.$index, scope.row)">
              <el-button slot="reference" type="danger" icon="el-icon-delete" >删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!--编辑按钮-->
      <el-form v-model="list" ref="numberValidateForm" label-width="100px" class="demo-ruleForm" v-if="set"
        style="
          width: 600px;
          height: 400px;
          background: #fff;
          position: fixed;
          z-index: 9;
          top: 100px;
          left: 30%;
          box-shadow: 0 0 6px #333;
          padding-top: 60px;
        ">
        <el-form-item label="编辑商品"></el-form-item>
        <el-form-item label="兑换商品所需积分" prop="price">
          <el-input style="width: 440px" type="number" v-model="list.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品名称" prop="name">
          <el-input style="width: 440px" type="text" v-model="list.name" autocomplete="off" ></el-input>
        </el-form-item>
        <el-form-item label="图片" prop="image">
          <el-input style="width: 440px" type="text" v-model="list.image" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="setRow">提交</el-button>
          <el-button @click="set = !set">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>


<script>
// import axios from "axios"
import {get,post,put,del} from'../utils/fecth'
export default {
  name: "backstage",
  data() {
      return {
        showList:false,
        newList:[],
        list:{},
        // changelist:{},
        set:false
      }
  },
  created() {
      const data =get('admin/shopList')
      .then(res=>{
          this.list = res
      })
      console.log(data)
  },
   methods: {
      backoff(){
        localStorage.removeItem('A')
          this.$router.push({
              name:'login'
          })
      },
      async getlist(){
          const data = await post('admin/shopItem',{
            name:this.newList.name,
            price:this.newList.price,
            image:this.newList.image
          })
          this.showList=!this.showList
          console.log(111)
          
        console.log(data)
      },
      upList(index){
        //   console.log(this.list,index)
        if(this.list[index]){
          this.list = this.list[index]
        }
              
      },
      async setRow(){
        const list2 = { 
            _id: this.list._id,
            name: this.list.name,
            price: this.list.price,
            image: this.list.image
        }
        const data = await put('admin/shopItem',{data: list2})
        if(data.success == true){
          this.set = !this.set
        }
        // console.log(JSON.stringify(list2))
        // localStorage.setItem('trade',JSON.stringify(list2))
        // this.list = JSON.parse(localStorage.getItem('trade'))
        console.log(data)
      },
      async handleDelete(index){
        this.list = this.list[index]
        const data = del('admin/shopItem',{id:this.list._id})
        this.list={}
        console.log(this.list)
        console.log(data)
      }
  },
//   data() {
//     return {
//       showList: false,
//       newList: [],
//       //    list:JSON.parse(JSON.stringify(this.$store.state.login)),
//       list: JSON.parse(localStorage.getItem("list")),
//       set: false,
//     };
//   },
//   computed: {
//     ...mapState({
//       list: (state) => state.showrecord,
//     }),
//   },
//   created() {
//     this.show();
//     this.newList = JSON.parse(JSON.stringify(this.$store.state.login));
//     console.log(this.newList.name);
//     console.log(
//       "JSON.parse(JSON.stringify(this.$store.state.login))",
//       JSON.parse(JSON.stringify(this.$store.state.login))
//     );
//     console.log("=====>", this.list);
//   },
//   methods: {
//     ...mapMutations(["showlogin"]),
//     setList(index) {
//       this.set = !this.set;
//       this.newList = JSON.parse(JSON.stringify(this.$store.state.login))[index];
//     },
//     async setRow() {
//       const data = await this.aPut("/admin/shopItem", {
//         data: {
//           _id: this.newList._id,
//           name: this.newList.name,
//           price: this.newList.price,
//           image: this.newList.image,
//         },
//       });
//       console.log("data", data);
//       this.set = !this.set;
//       this.show();
//     },
//     async show() {
//       const data = await this.aGet("/admin/shopList");
//       console.log("data", data);
//       this.showlogin(JSON.parse(JSON.stringify(data)));
//       this.showRow = data;
//     },
//     async handleDelete(index) {
//       console.log(this.list[index]._id);
//       const data = await this.aDel("/admin/shopItem", {
//         id: this.list[index]._id,
//       });
//       console.log(data);
//       this.list[index].isDeleted = true;
//       this.show();
//     },
//     async submitForm() {
//       const data = await this.aPost("/admin/shopitem", {
//         name: this.newList.name,
//         image: this.newList.image,
//         price: this.newList.price,
//       });
//       this.showList = !this.showList;
//       this.list = data.data;
//       this.show();
//       console.log(data);
//     },
//     out() {
//       localStorage.setItem("id", "");
//       localStorage.setItem("list", "");
//       //  localStorage.clear();
//       this.$router.push({
//         name: "login",
//       });
//     },
//   },
};
</script>


<style lang="scss">
.admin-left {
  width: 40px;
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  background: #262626;
}
img {
  width: 140px;
  height: 140px;
}
h3 {
  width: 100px;
}
.admin-right {
  margin-left: 40px;
}
</style>